<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar
      title="编辑昵称"
      left-text="取消"
      right-text="确认"
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />

    <!-- 文本结构 -->
    <div style="padding: 8px;">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="11"
        placeholder="请输入昵称"
        show-word-limit
      />
    </div>
  </div>
</template>

<script>
import { updateUserProfileAPI } from '../../../api/index.js'
export default {
  name: 'NameEdit',

  props: {
    userName: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      message: this.userName
    }
  },

  methods: {
    // 点击确认
    async onConfirm () {
      try {
        await updateUserProfileAPI({
          name: this.message
        })

        this.$toast.success('修改成功')

        // 修改成功后需要关闭页面，并更新昵称
        // 更新昵称
        this.$emit('update:userName', this.message)

        // 关闭弹框
        this.$emit('close')
      } catch (error) {
        console.log(error)
        this.$toast.fail('修改失败')
      }
    }
  }
}
</script>

<style>

</style>
